
import { useState } from 'react';
import store from './redux/store';
import { userNameAction, unreadCountActionPromise } from './redux/action';
// import { useDispatch } from 'react-redux';
import { useDispatch, useSelector } from '../8_source/4_react_redux';

export default function ProfileSetting() {
    const [username, setUsername] = useState("");
    const [loading, setLoading] = useState(false);
    const dispatch = useDispatch();
    const usernameProps = useSelector(state => state.username);

    return (
        <div className='profile-setting'>
            个人信息设置页面：<br />
            <span style={{ marginRight: '10px' }}>{usernameProps}</span>

            <input placeholder="新用户名"
                value={username}
                onChange={e => setUsername(e.target.value)}
            />
            <button onClick={e => {
                // store.dispatch(userNameAction(username));
                dispatch(userNameAction(username));
                setUsername('');
            }}>修改</button>

            <br />
            由后端耗时2s获取未读消息条数：
            <button onClick={() => {
                setLoading(true);
                store.dispatch(unreadCountActionPromise(() => setLoading(false)));
            }}

            >{loading ? 'loading...' : '延时获取'}</button>

        </div>
    )
}